<!DOCTYPE html>
<!-- 此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>熟悉a-k开头的所有标签,写个案例</title>
		<!-- <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。 -->
	</head>

	<!-- body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） -->
	<body>

		<!-- <a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的 -->
		<a href="https://www.baidu.com/?tn=44004473_24_oem_dg">百度</a>

		<!-- <abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
<abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。 -->
		The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

		<!-- <address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。 -->
		<address>
			Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
			Visit us at:<br>
			Example.com<br>
			Box 564, Disneyland<br>
			USA
		</address>

		<!-- HTML5 中不支持 <acronym> 标签。请使用 <abbr> 标签代替。
<acronym> 标签定义首字母缩写。
缩写能够作为单词来朗读，例如 NATO, NASA, ASAP, GUI。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。 -->
		<acronym title="World Wide Web">WWW</acronym>

		<!-- HTML5 中不支持 <applet> 标签。请使用 object 元素 标签代替。
HTML 4.01 中不赞成使用 <applet> 元素。
<applet> 标签定义嵌入的 applet。 -->
		<applet code="Bubbles.class" width="350" height="350">
			Java applet that draws animated bubbles.
		</applet>

		<!-- <area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。
注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。 -->
		<img src="../image/bitbug_favicon.ico" border="0" usemap="#planetmap" alt="Planets" />
		<map name="planetmap" id="planetmap">
			<area shape="circle" coords="180,139,14" href="venus.html" alt="Venus" />
			<area shape="circle" coords="129,161,10" href="mercur.html" alt="Mercury" />
			<area shape="rect" coords="0,0,110,260" href="sun.html" alt="Sun" />
		</map>

		<!-- <article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
论坛帖子
报纸文章
博客条目
用户评论 -->
		<article>
			<h1>Internet Explorer 9</h1>
			<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
		</article>

		<!-- <aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。 -->
		<p>Me and my family visited The Epcot center this summer.</p>
		<aside>
			<h4>Epcot Center</h4>
			The Epcot Center is a theme park in Disney World, Florida.
		</aside>

		<!-- <audio> 标签定义声音，比如音乐或其他音频流。 -->
		<audio src="../video/tiaowu.mp4">
			您的浏览器不支持 audio 标签。
		</audio>

		<!-- <b> 标签规定粗体文本。-->
		<p>这是普通文本 - <b>这是粗体文本</b>。</p>

		<!-- <base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。 -->
		<head>
			<base href="http://www.w3school.com.cn/i/" />
			<base target="_blank" />
		</head>
		<body>
			<img src="eg_smile.gif" />
			<a href="http://www.w3school.com.cn">W3School</a>
		</body>

		<!--<basefont> 标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。  -->
		<head>
			<basefont color="red" size="5" />
		</head>
		<body>
			<h1>This is a header</h1>
			<p>This is a paragraph</p>
		</body>

		<!-- bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。 -->
		<ul>
			<li>Username <bdi>Bill</bdi>:80 points</li>
			<li>Username <bdi>Steve</bdi>: 78 points</li>
		</ul>

		<!-- bdo 元素可覆盖默认的文本方向。 -->
		<bdo dir="rtl">Here is some text</bdo>

		<!-- <big> 标签呈现大号字体效果。
使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。
更妙的是，可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7 号文本，正如字体模型所定义的那样。
但是使用 <big> 标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big> 标签的浏览器来说，它经常将其认为是粗体字标签。 -->
		<big>大大大大大</big>

		<!-- <blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 -->
		<blockquote>
			Here is a long quotation here is a long quotation here is a long quotation
			here is a long quotation here is a long quotation here is a long quotation
			here is a long quotation here is a long quotation here is a long quotation.
		</blockquote>

		<!-- <br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。-->
		<h3>dddddddddd<br>vvvvvvvvvvvvv</h3>

		<!-- <button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 -->
		<button type="button">Click Me!</button>

		<!-- <canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 -->
		<canvas id="myCanvas"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			ctx.fillStyle = '#FF0000';
			ctx.fillRect(0, 0, 80, 100);
		</script>

		<!-- caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->
		<table border="1">
			<caption>Monthly savings</caption>
			<tr>
				<th>Month</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
			</tr>
		</table>

		<!-- 对其所包括的文本进行水平居中。 -->
		<center>居中</center>

		<!-- <cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。 -->
		<cite>引用 斜体显示</cite>

		<!-- 定义计算机代码文本 -->
		<code>一段电脑代码 print("Hello World")</code>

		<!-- <col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。 -->
		<table width="100%" border="1">
			<col align="left" />
			<col align="left" />
			<col align="right" />
			<tr>
				<th>ISBN</th>
				<th>Title</th>
				<th>Price</th>
			</tr>
			<tr>
				<td>3476896</td>
				<td>My first HTML</td>
				<td>$53</td>
			</tr>
		</table>

		<!-- <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。 -->
		<table width="100%" border="1">
			<colgroup span="2" align="left"></colgroup>
			<colgroup align="right" style="color:#0000FF;"></colgroup>
			<tr>
				<th>ISBN</th>
				<th>Title</th>
				<th>Price</th>
			</tr>
			<tr>
				<td>3476896</td>
				<td>My first HTML</td>
				<td>$53</td>
			</tr>
		</table>

		<!-- command 元素表示用户能够调用的命令。
<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 -->
		<menu>
			<command onclick="alert('Hello World')">
				Click Me!</command>
		</menu>

		<!-- <data> 标签用于添加给定内容的机器可读翻译。
该元素既为数据处理器提供了机器可读的值，又为浏览器中的渲染提供了人类可读的值。
提示：如果内容与时间或日期相关，请改用 <time> 元素。 -->
		<ul>
			<li><data value="21053">圣女果</data></li>
			<li><data value="21054">牛肉番茄</data></li>
			<li><data value="21055">零食番茄</data></li>
		</ul>

		<!-- <datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。 -->
		<input id="myCar" list="cars" />
		<datalist id="cars">
			<option value="BMW">
			<option value="Ford">
			<option value="Volvo">
		</datalist>

		<!-- <dd> 在定义列表中定义条目的定义部分。 -->
		<dl>
			<dt>计算机</dt>
			<dd>用来计算的仪器 ... ...</dd>
			<dt>显示器</dt>
			<dd>以视觉方式显示信息的装置 ... ...</dd>
		</dl>

		<!-- 定义文档中已被删除的文本。 -->
		a dozen is <del>20</del> 12 pieces

		<!-- <details> 标签用于描述文档或文档某个部分的细节。 -->
		<details>
			<summary>Copyright 2011.</summary>
			<p>All pages and graphics on this web site are the property of W3School.</p>
		</details>

		<!-- 定义一个定义项目。 -->
		<dfn>定义一个定义项目</dfn>

		<!-- <dialog> 标签定义对话框或窗口。 -->
		<table border="1">
			<tr>
				<th>一月 <dialog open>这是打开的对话窗口</dialog>
				</th>
				<th>二月</th>
				<th>三月</th>
			</tr>
			<tr>
				<td>31</td>
				<td>28</td>
				<td>31</td>
			</tr>
		</table>

		<!-- <dir> 标签定义目录列表。 -->
		<dir>
			<li>HTML</li>
			<li>XHTML</li>
			<li>CSS</li>
		</dir>

		<!-- <div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 -->
		<div style="color:#00FF00">
			<h3>This is a header</h3>
			<p>This is a paragraph.</p>
		</div>

		<!-- <dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
 <dt> 标签定义了定义列表中的项目（即术语部分）。-->
		<dl>
			<dt>计算机</dt>
			<dd>用来计算的仪器 ... ...</dd>
			<dt>显示器</dt>
			<dd>以视觉方式显示信息的装置 ... ...</dd>
		</dl>

		<!-- 把文本定义为强调的内容。 -->
		<em>把文本定义为强调的内容。</em>

		<!-- <embed> 标签定义嵌入的内容，比如插件。 -->
		<embed src="helloworld.swf" />

		<!-- fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。 -->
		<form>
			<fieldset>
				<legend>health information</legend>
				height: <input type="text" />
				weight: <input type="text" />
			</fieldset>
		</form>

		<!-- <figcaption> 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 -->
		<figure>
			<figcaption>黄浦江上的的卢浦大桥</figcaption>
			<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
		</figure>

		<!-- <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 -->
		<figure>
			<p>黄浦江上的的卢浦大桥</p>
			<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
		</figure>

		<!-- <font> 规定文本的字体、字体尺寸、字体颜色。 -->
		<font size="3" color="red">This is some text!</font>
		<font size="2" color="blue">This is some text!</font>
		<font face="verdana" color="green">This is some text!</font>

		<!-- <footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。 -->
		<footer>
			<p>Posted by: W3School</p>
			<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
		</footer>

		<!-- <form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。 -->
		<form action="form_action.asp" method="get">
			<p>First name: <input type="text" name="fname" /></p>
			<p>Last name: <input type="text" name="lname" /></p>
			<input type="submit" value="Submit" />
		</form>

		<!-- <frame> 标签定义 frameset 中的一个特定的窗口（框架）。
frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。 -->
		<frameset cols="25%,50%,25%">
			<frame src="frame_a.htm" />
			<frame src="frame_b.htm" />
			<frame src="frame_c.htm" />
		</frameset>

		<!-- frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。 -->
		<frameset cols="25%,50%,25%">
			<frame src="frame_a.htm" />
			<frame src="frame_b.htm" />
			<frame src="frame_c.htm" />
		</frameset>

		<!-- <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。-->
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
		<h4>这是标题 4</h4>
		<h5>这是标题 5</h5>
		<h6>这是标题 6</h6>

		<!-- <header> 标签定义文档的页眉（介绍信息）。 -->
		<header>
			<h1>Welcome to my homepage</h1>
			<p>My name is Donald Duck</p>
		</header>
		<p>The rest of my home page...</p>

		<!-- <hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 -->
		<h1>This is header 1</h1>
		<hr />
		<p>This is some text</p>


		<!-- <i> 标签显示斜体文本效果。
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
提示：<i> 标签一定要和结束标签 </i> 结合起来使用。 -->
		<i>标签显示斜体文本效果。</i>


		<!-- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 -->

		<!-- img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。 -->
		<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

		<!-- <input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 -->
		<form action="form_action.asp" method="get">
			First name: <input type="text" name="fname" />
			Last name: <input type="text" name="lname" />
			<input type="submit" value="Submit" />
		</form>

		<!-- <ins> 标签定义已经被插入文档中的文本。 -->
		a dozen is <del>20</del> <ins>12</ins> pieces

		<!-- 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 -->
		<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。</kbd>

		<!-- <keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。-->
		<form action="demo_keygen.asp" method="get">
			Username: <input type="text" name="usr_name" />
			Encryption: <keygen name="security" />
			<input type="submit" />
		</form>
	</body>
</html>